<template>
  <el-dialog
    v-model="dialogVisible"
    title="关联用户"
    @closed="closedDialog"
    width="50%"
    :close-on-click-modal="false"
  >
    <div class="table-wrapper">
      <el-table row-key="id" :data="userAllList" @select="selectDeptUserId">
        <el-table-column type="selection" width="55" />
        <el-table-column property="account" label="用户账户" />
        <el-table-column property="userName" label="用户姓名" />
        <el-table-column property="mobilePhone" label="联系方式" />
      </el-table>
    </div>

    <div class="pager-wrapper">
      <el-pagination
        background
        :layout="paginationData.layout"
        :page-sizes="paginationData.pageSizes"
        :total="paginationData.total"
        :page-size="paginationData.limit"
        :currentPage="paginationData.page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <template #footer>
      <el-button @click="closedDialog">取消</el-button>
      <el-button type="primary" @click="addDeptUserFrom" :loading="loading">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import UserAPI, { type UserVO } from "@/api/system/base/user";
import DeptAPI, { type DeptUserVO } from "@/api/system/base/dept";
import { usePagination } from "@/hooks/usePagination";

/**
 * 部门用户关联关系弹窗
 */
defineOptions({
  name: "DeptUserTableDialog",
});
const props = defineProps({
  deptCode: {
    type: String,
    required: true,
  },
  closedDialog: {
    type: Function,
    required: true,
  },
});

/** 翻页状态 */
const { paginationData, handleCurrentChange, handleSizeChange } =
  usePagination();

const dialogVisible = ref<boolean>(true);
const tableLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
const userAllList = ref<UserVO[]>([]);
/** 选中的用户 */
const userIdsTemp = ref<string[]>([]);

/** 获取用户列表 */
const getTableData = () => {
  tableLoading.value = true;
  UserAPI.getTableDataApi({
    page: paginationData.page,
    limit: paginationData.limit,
  })
    .then((res) => {
      const { status, data } = res;
      if (status === 200) {
        userAllList.value = data.rows;
        paginationData.total = data.total;
      }
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
/** 关闭弹窗 */
const closedDialog = () => {
  props.closedDialog(false);
};
/** 选择用户追加到缓存 */
const selectDeptUserId = (selection: any) => {
  if (selection) {
    selection.forEach((user: UserVO) => {
      userIdsTemp.value.push(user.id!);
    });
  }
};
/** 添加部门用户关系 */
const addDeptUserFrom = () => {
  loading.value = true;
  const data: DeptUserVO = { userIds: userIdsTemp.value };
  if (userIdsTemp.value.length <= 0) {
    ElMessage.warning("请选择待分配的用户！");
    return;
  }
  DeptAPI.addDeptUserApi(props.deptCode, data)
    .then((res) => {
      const { status } = res;
      if (status === 200) {
        ElMessage.success("部门添加用户关系成功！");
        props.closedDialog(true);
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
/** 监听分页参数的变化 */
watch([() => paginationData.page, () => paginationData.limit], getTableData, {
  immediate: true,
});
</script>

<style lang="scss" scoped>
.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
